<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="./需要使用的截图/网页logo.png" type="image/x-icon">                       <!--标题前面的小图标-->
    <link rel="stylesheet" href="./fonts/font.css" type="text/css">
    <title>你画'bot'猜</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        body{
            background-color: rgba(128,128,128,0.2);
        }

        #container{
            width:980px;
            height:3480px;
            margin:25px auto;
            background-color: white;
        }

        header{
            position:relative;
        }

        #container h1{
            text-align: center;
            position: relative;
            font-family: 俏皮字体,"宋体","微软雅黑";
            font-size:72px;
            top:72px;
        }

        #container h1 span{
            color:cornflowerblue;
        }

        #rightTopImage{
            position:absolute;
            top:0;
            left:0;
        }

        #leftTopImage{
            position:absolute;
            top:0;
            right:0;
        }

        section#navigationList{
            position:relative;
            margin-top:120px;
        }

        section div{
            color:yellowgreen;
            font-family: 俏皮字体,"宋体","微软雅黑";
            font-size:48px;
            padding-left:50px;
        }

        #navigationList ul{
            list-style-type: none;
            padding-top:20px;
            padding-left:70px;
        }

        #navigationList ul li{
            margin-top:25px;
        }

        #navigationList ul li a{
            text-decoration: none;
            display: inline-block;
            font-size:30px;
            color: #ffce8f;
            font-family: 俏皮字体,"宋体","微软雅黑";
            margin-left:30px;
        }

        #navigationList ul li a:hover{
            text-decoration: underline;
        }

        div.divideLine{
            height:35px;
            width:100%;
            margin-top:50px;
            repeat:repeat-x;
        }

        div.a1{
            background-image: url("./一些资料/分隔背景_草.png");
        }

        div.a2{
            background-image: url("./一些资料/分隔背景_花.png");
        }

        div.a3{
            background-image: url("./一些资料/分隔背景_树.png");
        }

        div.a4{
            background-image: url("./一些资料/分隔背景_叶.png");
        }

        div#productPurpose{
            width:88%;
            margin-left:auto;
            margin-right:auto;
            height:150px;
            border: 2px dotted deepskyblue;
            border-radius: 20px;
            padding-top:10px;
        }

        img.sheep{
            float:left;
        }

        div p{
            font-size:22px;
            color:deepskyblue;
            line-height: 35px;
            font-family: 微软雅黑;
        }

        div#productPurpose p b{
            color:darkblue;
        }

        div#useIntroduction{
            width:88%;
            margin-left:auto;
            margin-right:auto;
            height:80px;
            border: 2px dotted deepskyblue;
            border-radius: 20px;
            padding-top:10px;
            margin-bottom: 20px;
        }

        div.image{
            display: inline-block;
            height:250px;
            width:142px;
            padding-left:20px;
            margin-right:20px;
        }

        div.image img{
            height:250px;
            width:142px;
        }

        div#getMethod{
            width:88%;
            margin-left:auto;
            margin-right:auto;
            height:120px;
            border: 2px dotted deepskyblue;
            border-radius: 20px;
            padding-top:10px;
        }

        div.image1{
            display: inline-block;
           /* height:250px;
            width:250px;*/
            padding-left:20px;
            margin-right:20px;
        }

        /*div.image1 img{
            height:250px;
            width:250px;
        }*/

        footer{
            top:1150px;
            position:relative;
        }

        footer img#rightBottomImage{
            position:absolute;
            right:0;
            bottom:0;
        }

        footer img#leftBottomImage{
            position:absolute;
            left:0;
            bottom:0;
        }
    </style>
</head>
<body>
<div id="container">
    <header>
        <img id="rightTopImage" alt="" src="./一些资料/植物简笔画1.jpg" width="150" height="150">
        <h1>
            <span>你画'bot'猜</span>网页介绍
        </h1>
        <img id="leftTopImage" alt="" src="./一些资料/植物简笔画2.jpg" width="150" height="150">
    </header>

    <section id="navigationList">
        <div>一.网页导航</div>
        <ul>
            <li><img src="./一些资料/海豹蹦迪.gif" height="40" width="40"><a href="#part1">项目目的</a></li>
            <li><img src="./一些资料/海豹蹦迪.gif" height="40" width="40"><a href="#part2">使用介绍</a></li>
            <li><img src="./一些资料/海豹蹦迪.gif" height="40" width="40"><a href="#part3">效果展示</a></li>
            <li><img src="./一些资料/海豹蹦迪.gif" height="40" width="40"><a href="#part4">获取方法</a></li>
        </ul>
    </section>

    <div class="divideLine a1"></div>

    <section id="part1">
        <div style="padding-top:20px">二.项目目的</div>
        <div id="productPurpose">
            <img class="sheep" src="一些资料/傻羊羊.gif">
            <p><i>"教育的最初目的其实是激发对事物的兴趣"</i>,所以我们希望通过 <b>你画"bot"猜 </b>小程序来帮助小孩子激发他们对于画画的兴趣,对于事物的探索,他们可以发挥自己的想象或者画画身边的事物,然后比对下最后"bot"识别的事物,可以用于早期教育,老师利用该小程序来帮助小孩子思考不同事物之间的区别的并引导他们通过画画来感受美好事物。</p>
        </div>
    </section>

    <div class="divideLine a2"></div>

    <section id="part2">
        <div style="padding-top:20px">三.使用介绍</div>
        <div id="useIntroduction">
            <div>
                <img class="sheep" src="一些资料/傻羊羊.gif">
                <p>点击开始按钮进入画板页面------>选择你需要的笔触进行绘画------>等待人工智能的识别结果------>重置清空画板</p>
            </div>
        </div>
        <div class="image"><img src="./需要使用的截图/首页.png"></div>
        <div class="image"><img src="./需要使用的截图/工作页面.png"></div>
        <div class="image"><img src="./需要使用的截图/花.png"></div>
        <div class="image"><img src="./需要使用的截图/加载画面.png"></div>
        <div class="image"><img src="./需要使用的截图/使用动图.gif"></div>
    </section>

    <div class="divideLine a3"></div>

    <section id="part3">
        <div style="padding-top:20px">四.效果展示</div>
        <video controls src="./需要使用的截图/展示视频.mp4" height="400" width="980" style="margin-top:20px"/>
    </section>

    <div class="divideLine a4"></div>

    <section id="part4">
        <div style="padding-top:20px">五.获取方法</div>
        <div id="getMethod">
            <div>
                <img class="sheep" src="一些资料/傻羊羊.gif">
                <p>在微信小程序开发者的人员配置输入体验着的微信号，体验者通过扫描生成的二维码就可以获得对应的游戏。<span style="color: red">但遗憾的是在上线体验版过程中，选择模式误选为了<b>小游戏</b>，因此appId作废，无法获得上线结果</span></p>
            </div>
        </div>
    </section>

    <footer>
        <img id="rightBottomImage" alt="" src="./一些资料/植物简笔画3.jpg" width="150" height="150">
        <img id="leftBottomImage" alt="" src="./一些资料/植物简笔画4.jpg" width="150" height="150">
    </footer>
    <div class="image1" style="width:500px;height:400px;border:2px solid red"><img src="./一些资料/上线证据1.png" width="500" height="400"></div>
    <div class="image1" style="width:300px;height:500px;border:2px solid red"><img src="./一些资料/上线证据2.jpg" width="300" height="500"></div>
    <div class="image1" style="width:250px;height:250px;border:2px solid red"><img src="./一些资料/上线之后生成的二维码.jpg" width="250" height="250"></div>
    <div class="image1"style="width:800px;height:100px;"><img src="./一些资料/上线证据3.png" width="800" height="100"></div>
</div>
</body>
</html>